<template>
  <div class="confirm">
    <div class="van-top">
      <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 课程卡片 -->
    <van-card
      :price="price"
      title="UI设计全进阶课程(名师课程)"
      :thumb="require('../../../../mock/images/人工智能.png')"
    />
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model:show="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>

    <!-- 明细描述 -->
    <div class="describe">
      <div>
        <span>总计</span><span>{{ price }}</span>
      </div>
      <div>
        <span>优惠券</span><span>-￥{{ num }}</span>
      </div>
      <div>
        <span>实付款</span
        ><span :style="{ fontWeight: 'bold' }">￥{{ price - num }}</span>
      </div>
    </div>

    <van-submit-bar
      :price="(price - num) * 100"
      button-text="立即支付"
      @submit="handleShowConfirm"
    />

    <!-- 支付方式 -->
    <div class="payTitle">
      <span>支付方式</span>
      <!-- 支付方式选择 -->
      <van-radio-group v-model="radio">
        <van-cell-group v-for="item in pay" :key="item.value">
          <van-cell clickable @click="handleCheck(item)">
            <template #title>
              <van-icon :name="item.icon" />
              <span>{{ item.text }}</span>
            </template>
            <template #right-icon>
              <van-radio :name="item.value" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 1000,
  name: '无门槛优惠券',
  startAt: 1667959013,
  endAt: 1672502399,
  valueDesc: '10',
  unitDesc: '元',
}

function debounce(func, wait) {
  let timeout
  return function () {
    // 清空定时器
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(func, wait)
  }
}

export default {
  name: 'confirm',
  data() {
    return {
      price: '235.00',
      courses: {},
      // 优惠券数据
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      num: 0,
      // 支付方式数据
      radio: 0,
      pay: [
        { icon: 'card', text: '余额支付', value: 1 },
        { icon: 'alipay', text: '支付宝', value: 2 },
        { icon: 'wechat-pay', text: '微信支付', value: 3 },
      ],
      // 支付点击显示面板
      show1: false,
      // 支付方式默认状态及选择
      value1: 1,
    }
  },
  computed: {
    confirmToDetailData() {
      return this.$route.query
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user')
    },
    // 优惠券事件
    onChange(index) {
      this.showList = false
      this.chosenCoupon = index
      console.log(typeof index)
      if (index !== -1) {
        this.num = this.coupons[index].value / 100
      } else {
        this.num = 0
      }
    },
    // 优惠券事件
    onExchange(code) {
      this.coupons.push(coupon)
    },
    // 支付方式选择
    handleCheck(item) {
      this.radio = item.value
      this.value1 = item.value
    },
    // 点击立即支付按钮
    _handleShowConfirm() {
      console.log(this.$store.getters['userModule/userInfo'].balance)
      if (this.radio === 0) {
        Toast('请选择支付方式')
      } else if (this.value1 === 1 && this.balance < this.price - this.num) {
        Toast('余额不足，请充值')
        this.$router.push('/balance')
      } else if (this.value1 === 1) {
        const pay = this.price - this.num
        this.$store.commit('userModule/remainingAmount', pay)
        this.$router.push('/payment-succeeded')
      } else {
        Toast('系统维护，暂只提供余额支付')
      }
    },
  },
  created() {
    this.handleShowConfirm = debounce(this._handleShowConfirm.bind(this), 500)
  },
}
</script>

<style lang="less" scoped>
.confirm {
  background: rgb(243, 241, 241);
  padding: 18px;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}
.van-card {
  border-radius: 6px;
  margin-bottom: 20px;
}
.van-card__title {
  height: 50px;
  line-height: 30px;
  font-size: 30px;
  font-weight: bold;
}
/deep/.van-card__thumb {
  width: 120px;
}
.titles {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 5px;
}
.price {
  font-size: 18px;
  font-weight: bold;
  color: red;
}
//明细描述样式
.describe {
  background: white;
  padding: 15px;
  margin: 20px 0px;
  border-radius: 6px;
  font-size: 14px;
  div {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
  }
}

// 支付方式样式
.payTitle {
  padding: 10px;
  background: white;
  font-size: 14px;
}
.van-radio-group {
  .van-icon {
    padding-right: 10px;
    color: rgb(26, 127, 227);
  }
  .van-icon-alipay {
    color: rgb(228, 52, 49);
  }
  .van-icon-wechat-pay {
    color: rgb(15, 201, 15);
  }
}
</style>
